<template>
  <div>
    <n-row style="width: 300px">
      <n-col :span="12">
        <n-progress
          type="line"
          :height="26"
          :percentage=" Math.round((props.successNum + props.failNum) / props.totalNum * 100)  "
          :border-radius="4"
          :indicator-placement="'inside'"
          :processing="props.successNum + props.failNum < props.totalNum"
        >
          ({{successNum}}/<n-text style="color: red">{{ failNum }}</n-text>) {{ totalNum }}
        </n-progress>
      </n-col>
      <n-col :span="12" style="padding-left: 5px;">

        <n-button size="small" type="error" @click="props.cancelTask" v-if="props.successNum + props.failNum < props.totalNum"  style="margin-left: 5px;">取消</n-button>
      </n-col>
    </n-row>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  totalNum: {
    type: Number,
    default: 0
  },
  successNum: {
    type: Number,
    default: 0
  },
  failNum: {
    type: Number,
    default: 0
  },
  pauseFlag: {
    type: Boolean,
    default: false
  },
  pauseTask: {
    type: Function,
    default: () => {}
  },
  continueTask: {
    type: Function,
    default: () => {}
  },
  cancelTask: {
    type: Function,
    default: () => {}
  }
})



</script>
